<!DOCTYPE html>
<html  data-layout-decorate="~{fragment/layout}">
<head>
<meta charset="UTF-8">
<title>考核评分</title>
<script type="text/javascript">
    var data =  {
	    tableParams : {
	    	//toolbar: '#toolbar',  //工具栏的ID
	    	pageSize:100,
	    	url : 'page'
	    	},
	    	
	    	urls : {
	    		delete : 'delete',
	    		update : 'edit',
	    		add : 'edit',
	    		search:'search'
	    	},
	    	
	    	queryCondition : {
	    		testId : '',
	    		teacherId : '',
	    		classId : '' ,
	    		studentId: ''
	    	}
	};
    var viewModel;
$(function(){
	viewModel=new BsTableViewModel(data);
	ko.applyBindings(viewModel,document.getElementById('scroingGrade2_table_div'));	
	
});
function classChange(classId){
	var testId=$('#search_testId').val();
	viewModel.queryCondition.studentId('');
	$.post('classChange',{classId:classId,testId:testId},function(data){
		var sel=$('#search_studentId');
		sel.empty();
		sel.append($("<option value=''/>").html('请选择'));
		for(var i=0;i<data.length;i++){
			var option= $('option').val(data[i].id).html(data[i].name);
			sel.append(option);
		}
	});
}
function testChange(testId){
	console.info(viewModel.queryCondition);
	$.post('testChange',{testId:testId},function(data){
		viewModel.queryCondition.teacherId('');
		viewModel.queryCondition.classId('');
		viewModel.queryCondition.studentId('');
		var teaSel= $('#search_teacherId');
		teaSel.val('');
		var teachers=data.teachers;
		teaSel.empty();
		teaSel.append($("<option value=''/>").html('请选择'));
		for(var i=0;i<teachers.length;i++){
			var option=$('<option/>').val(teachers[i].id).html(teachers[i].name);
			teaSel.append(option);
		}
		var bjSel=$('#search_classId');
		bjSel.empty();
		bjSel.append($("<option/>").val('').html('请选择'));
		var bjs=data.classes;
		for(var i=0;i<bjs.length;i++){
			var option=$('<option/>').val(bjs[i].id).html(bjs[i].name);
			bjSel.append(option);
		}
		var stuSel=$('#search_studentId');
		stuSel.empty();
		stuSel.append($("<option/>").val('').html('请选择'));
		var stus=data.students;
		for(var i=0;i<stus.length;i++){
			var option=$('<option/>').val(stus[i].id).html(stus[i].name);
			stuSel.append(option);
		}
		
		
	});	
}
</script>
</head>
<body>
	<section data-layout-fragment="content">
	<div id="scroingGrade2_table_div" class="container">

		<!-- 查询窗口 -->
		<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
           	<div class="modal-dialog" role="document">
                <div class="modal-content">
	                <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">查询</h4>
	                </div>
	               	<div class="modal-body">
	            	<!-- 以下为要查询的的内容 -->
	                    <div class="form-group">
	                        <label for="search_testId">考核名称</label>
	                        <select id="search_testId" class="form-control" name="testId" onchange="testChange(this.value)" data-bind="value:queryCondition.testId">
	                        	<option value="">请选择</option>
	                        	<option data-th-each="test:${tests}" data-th-value="${test.id}" data-th-text="${test.name}"></option>
	                        </select>
	                    </div>
	                    <div class="form-group">
	                        <label for="search_teacherId">考核教师</label>
	                        <select id="search_teacherId" class="form-control" name="teacherId" data-bind="value:queryCondition.teacherId">
	                        	<option value="">请选择</option>
	                        	
	                        </select>
	                    </div>
	                    <div class="form-group">
	                        <label for="search_classId">考核班级</label>
	                        <select id="search_classId" class="form-control" name="classId" onchange="classChange(this.value)" data-bind="value:queryCondition.classId">
	                        	<option value="">请选择</option>
	                        	
	                        </select>
	                    </div>
	                    <div class="form-group">
	                        <label for="search_studentId">考核学生</label>
	                        <select id="search_studentId" class="form-control" name="studentId" data-bind="value:queryCondition.studentId">
	                        	<option value="">请选择</option>
	                        </select>
	                    </div>
	                <!-- 以上为要查询的内容 -->
					</div>
					<div class="modal-footer">
		                <button type="button" class="btn btn-primary" data-dismiss="modal" data-bind="click:queryClick"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click:clearClick"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空</button>
	            	</div>
                </div>
                
           	</div>
		</div> 
		
		<!-- 工具栏 -->
		<div id="toolbar" class="btn-group">
			<!-- <button data-bind="click:addClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
			</button>
			<button data-bind="click:editClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
			</button>
			<button data-bind="click:deleteClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
			</button> -->
			<button data-bind="click:searchClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-search" aria-hidden="true"></span>选择考核名称和班级
			</button>
		</div>
	
		
		
		<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
		<table id="mytable" data-bind="bootstrapTable:$root">
			<thead>
				<tr>
					<!-- <th data-checkbox="true"></th> -->
					<!-- <th data-field="id">ID</th> -->
					<th data-field="testName">考试名称</th>
					<th data-field="studentName">学生姓名</th>
					<th data-field="teacherName">评分教师</th>
					<th data-field="scoringTitle">评分项</th>
					<th data-field="scoringExplanation" data-visible="false">评分说明</th>
					<th data-field="scoringScore">分值</th>
					<th data-field="grade">评分</th>
				</tr>
			</thead>
		</table>
	</div>
	</section>
</body>
</html>